﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0063)http://www.jcoverflip.com/files/docs/jcoverflip-demo/index.html -->
<!DOCTYPE html><HTML><HEAD><TITLE>jCoverflip Test</TITLE>
<META content="text/html; charset=utf-8" http-equiv="Content-Type"><LINK rel="stylesheet" 
type="text/css" href="index_arquivos/jquery-ui-1.7.2.custom.css" media="all">
<STYLE>
      .ui-jcoverflip {
        position: relative;
      }
      
      .ui-jcoverflip--item {
        position: absolute;
        display: block;
      }
      
      /* Basic sample CSS */
      #flip {
        height: 200px;
        width: 630px;
        margin-bottom: 50px;
      }
      
      #flip .ui-jcoverflip--title {
        position: absolute;
        bottom: -30px;
        width: 100%;
        text-align: center;
        color: blue;
      }
      
      #flip img {
        display: block;
        border: 0;
        outline: none;
      }
      
      #flip a {
        outline: none;
      }
      
      
      #wrapper {
        height: 300px;
        width: 630px;
        overflow: hidden;
        position: relative;
      }
      
      .ui-jcoverflip--item {
        cursor: pointer;
      }
      
      
      ul,
      ul li {
        margin: 0;
        padding: 0;
        display: block;
        list-style-type: none;
      }
      
      #scrollbar {
        position: absolute;
        left: 20px;
        right: 20px;
        
      }
      

    </STYLE>

<SCRIPT type="text/javascript" src="index_arquivos/jquery-1.3.2.js"></SCRIPT>

<SCRIPT type="text/javascript" src="index_arquivos/jquery-ui-1.7.2.custom.js"></SCRIPT>

<SCRIPT type="text/javascript" src="index_arquivos/jquery.jcoverflip.js"></scrip>
    <script>
    
    </SCRIPT>

<SCRIPT>

	var quantidadeImagens = 0;
	
	
    jQuery( document ).ready( function(){
		$("#flip li").each(function(){
			quantidadeImagens++;
		});
	
        jQuery( '#flip' ).jcoverflip({
          current: 2,
          beforeCss: function( el, container, offset ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
            ];
          },
          afterCss: function( el, container, offset ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '20px' }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
            ];
          },
          currentCss: function( el, container ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } )
            ];
          },
          change: function(event, ui){
            jQuery('#scrollbar').slider('value', ui.to*(100/(quantidadeImagens-1)));
          }
        }
		);
        
        
        jQuery('#scrollbar').slider({
          value: 1,
          stop: function(event, ui) {
            if(event.originalEvent) {
              var newVal = Math.round(ui.value/25);
              jQuery( '#flip' ).jcoverflip( 'current', newVal );
              jQuery('#scrollbar').slider('value', newVal*25);
            }
          }
        }
		);
		
		
		
		$("#flip li").each(function(){
			
		});
      });
      
      
    </SCRIPT>

<META name="GENERATOR" content="MSHTML 9.00.8112.16443"></HEAD>
<BODY>
<DIV id="wrapper">
<UL id="flip">
  <LI title="The first image"><IMG src="index_arquivos/1.png"></LI>
  <LI title="A second image"><IMG src="index_arquivos/2.png"></LI>
  <LI title="This is the description"><IMG src="index_arquivos/5.png"></LI>
  <LI title="Another description"><IMG src="index_arquivos/4.png"></LI>
    <LI title="The first image"><IMG src="index_arquivos/1.png"></LI>
  <LI title="A second image"><IMG src="index_arquivos/2.png"></LI>
  <LI title="This is the description"><IMG src="index_arquivos/5.png"></LI>
  <LI title="Another description"><IMG src="index_arquivos/4.png"></LI>
    <LI title="The first image"><IMG src="index_arquivos/1.png"></LI>
  <LI title="A second image"><IMG src="index_arquivos/2.png"></LI>
  <LI title="This is the description"><IMG src="index_arquivos/5.png"></LI>
  <LI title="Another description"><IMG src="index_arquivos/4.png"></LI> 
    <LI title="This is the description"><IMG src="index_arquivos/5.png"></LI>
  <LI title="Another description"><IMG src="index_arquivos/4.png"></LI> 
      <LI title="This is the description"><IMG src="index_arquivos/5.png"></LI>
  <LI title="Another description"><IMG src="index_arquivos/4.png"></LI>  
  </UL>
<DIV id="scrollbar"></DIV></DIV>
</BODY>
</HTML>
